<template>
    <div class="search-history">
        <van-cell title="搜索历史">
            <div v-if="isDeleteShow">
                <!-- props 数据不能重新赋值  -->
                <span @click="$emit('update-histories',[])">全部删除</span>&nbsp;&nbsp;
                <span @click="isDeleteShow = !isDeleteShow">完成</span>
            </div>
            <van-icon v-else @click="isDeleteShow = !isDeleteShow" name="delete"></van-icon>
        </van-cell>
        <van-cell :title="item" @click="onDelete(item,index)" v-for="(item,index) in searchHistories" :key="index">
            <van-icon v-show="isDeleteShow" name="close"></van-icon>
        </van-cell>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name:'SearchHistory',
    props:{
        searchHistories:{
            type:Array,
            required:true
        }
    },
    computed:{
        ...mapState(['user'])
    },
    data(){
        return {
            isDeleteShow:false,//
        }
    },
    methods:{
        onDelete(item,index){
            // 如果删除状态 则执行删除操作
            if (this.isDeleteShow) {
                this.searchHistories.splice(index,1)
                // 持久化处理
                // setItem('search-histories',this.searchHistories)
                return 
            }
            // 非删除状态，执行搜索，展示搜索结果
            this.$emit('search',item)
        }
    }
};
</script>

<style lang="less" scoped>
</style>